<template>
    <Popup v-model:show="show" :lock-scroll="false">
        <div class="blank"></div>
        <VueCropper style="height: 70vh;width: 100vw;" :img="img" ref="cropper" :outputSize="1" outputType="png"
            :info="true" :full="false" :fixed="true" :fixedBox="true" :original="true" :autoCrop="true"
            :autoCropWidth="autoCropWidth" :autoCropHeight="autoCropHeight">
        </VueCropper>
        <div class="blank"></div>
        <Button class="textbutton" size="large" @click="onCrop">确认</Button>
    </Popup>
</template>
<script lang="ts" setup>
import { ref, useTemplateRef, watch } from "vue";
import { VueCropper } from "vue-cropper";
import { Popup, Button } from "vant";
const cropper = useTemplateRef("cropper")
interface prop {
    img?: string,
    autoCropWidth?: number,
    autoCropHeight?: number
}
const props = withDefaults(defineProps<prop>(), {
    autoCropWidth: 200,
    autoCropHeight: 200
})
const emits = defineEmits(['update:img'])
const show = ref(false)
watch(() => props.img, (value) => {
    if (value) {
        show.value = !show.value
    }
})
const onCrop = () => {
    cropper.value.getCropBlob(async (blob: Blob) => {
        const file = new File([blob], '1.png', { type: blob.type });
        const img = URL.createObjectURL(file)
        emits('update:img', img)
    })
}
</script>